<template>
	<uni-nav-bar dark :fixed="true" shadow background-color="#fafafa" status-bar left-icon="left" left-text=" 详情"
		@clickLeft="back" color="#000" />
	<view class="container">
		<view class="feedback-form">
			<view class="section">
				<text class="section-title">问题描述：</text>
				<input class="input" v-model="problemDescription" placeholder="请输入至少超过8个字的问题描述" />
			</view>

			<view class="section">
				<text class="section-title">图片：</text>
				<view class="image-options">
					<label><input type="checkbox" v-model="images" value="+"> +</label>
					<label><input type="checkbox" v-model="images" value="-"> -</label>
				</view>
			</view>

			<button class="submit-button" @click="submitFeedback">提交反馈</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				problemDescription: '',
				images: []
			};
		},
		methods: {
			submitFeedback() {
				if (this.problemDescription.length < 8) {
					uni.showToast({
						title: '问题描述至少需要8个字',
						icon: 'none'
					});
					return;
				}

				// 这里可以添加提交反馈的逻辑
				uni.showToast({
					title: '反馈提交成功',
					icon: 'success'
				});

				// 清空表单
				this.problemDescription = '';
				this.images = [];
			}
		}
	};
</script>

<style>
	.container {
		padding: 20px;
	}

	.feedback-form {
		display: flex;
		flex-direction: column;
	}

	.section {
		margin-bottom: 20px;
	}

	.section-title {
		font-size: 16px;
		font-weight: bold;
		margin-bottom: 10px;
	}

	.input {
		border: 1px solid #ccc;
		padding: 10px;
		border-radius: 5px;
	}

	.image-options {
		display: flex;
		gap: 10px;
	}

	.submit-button {
		background-color: #E60012;
		color: white;
		padding: 10px;
		border-radius: 5px;
		text-align: center;
		margin-top: 20px;
	}
</style>